<nz-card nzSize="small" style="width: 400px;">
  <h2 [ngClass]="building.colorClass">
    <i nz-icon [nzType]="building.icon"></i>
    {{ building.name }}
  </h2>
  <span>
    <span class="used">
      Used:
      <span class="monospace"
        >{{ building.usedDepartments | format: true }}
      </span>
    </span>
    <span>
      Total:
      <span class="monospace"
        >{{ building.maxDepartments | format: true }}
      </span>
    </span>
  </span>

  <table class="margin-top">
    <thead>
      <tr>
        <th class="table-head">
          Name
        </th>
        <th class="table-head">
          Qty
        </th>
        <th></th>
        <th class="table-head">
          Priority
        </th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let dep of building.departments; trackBy: getDepId">
        <td
          class="title"
          nz-popover
          [nzPopoverTitle]="dep.name"
          [nzPopoverContent]="dep.description"
        >
          {{ dep.name }}
        </td>
        <td class="monospace quantity">
          {{ dep.quantity | format: true }}
        </td>
        <td>
          <button
            nz-button
            nzSize="small"
            nzType="secondary"
            [disabled]="building.usedDepartments >= building.maxDepartments"
            (click)="building.addDep(dep)"
          >
            <span>+1</span>
          </button>
        </td>
        <td>
          <nz-input-number
            nzSize="small"
            nzMin="0"
            nzMax="100"
            [(ngModel)]="dep.priority"
          ></nz-input-number>
        </td>
      </tr>
    </tbody>
  </table>

  <br />
  <nz-switch [(ngModel)]="building.autoDepartments" nzSize="small"></nz-switch>
  <label class="my-label"> Auto assign</label>
</nz-card>
